<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
		  <old-brother></old-brother>
		  <hr />
		  <brother></brother>
		</div>
	<template id="t1">
		<div>
			<p>我是哥哥---来自弟弟的礼物---<strong>{{gift}}</strong> </p>
		</div>
	</template>	
	
	<template id="t2">
		<div>
			<p @click="give">我是弟弟</p>
		</div>
	</template>	
		<script>
		//var bus=new Vue();
	  Vue.prototype.$bus=new Vue()
			var vm=new Vue({
				el:"#app",
				data:{
					
				},
				components:{
					"old-brother":{
						template:"#t1",
						data(){
							return {
								gift:'现在还是没有传递过来'
							}
						},
						created() {
							//console.log(this)
							/**
							var _this=this
							bus.$on('giveparse',function(val){
								//console.log(val)
								_this.gift=val;
								//console.log(this)
							})
							**/
							
							// bus.$on('giveparse',val=>{
							// 	this.gift=val;
							// })
							this.$bus.$on('giveparse',val=>{
								this.gift=val;
							})
						}
						
						
					},
					brother:{
						template:"#t2",
						data(){
							return {
								parse:'我这有一个大梨，给哥哥吧！'
							}
						},
						methods:{
							give(){
								// bus.$emit('giveparse',this.parse)
							this.$bus.$emit('giveparse',this.parse)
							}
						}
					}
				}
			
				
			})
			
		// (1)定义变量(中央事件总线)   1) bus=new vue 	 2) Vue.prototype.$bus=new Vue()
		// (2)	要传递数据的组件,派发事件:bus.$emit('事件名字',要传递的参数)
		// (3)接受数据的兄弟组件,(生命周期函数里面)接受事件:bus.$on('传递过来的事件名字',val=>{
		// 						         this.gift=val;
		// 					})
			
			
		</script>
	</body>
</html>
